<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>卡牌对战</title>
    <link rel="stylesheet" href="css/battle.css">
    <link rel="stylesheet" href="css/animation.css">
    <link rel="icon" href="logo.svg" type="image/svg+xml">
</head>

<body>
    <div class="battle-container">
        <!-- 敌方区域 -->
        <div class="battle-area enemy-area">
            <div class="character-section">
                <div class="character-info">
                    <div class="character-avatar">
                        <img src="images/弓箭手立绘.png" alt="敌方头像" id="enemyAvatar">
                    </div>
                    <div class="character-stats">
                        <p>生命值: 100/100</p>
                        <p>法力值: 10/10</p>
                    </div>
                    <div class="equipment-area">
                        <div class="equipment-slot" title="弓箭" id="enemySkill">
                            <img src="images/弓箭手卡.png" alt="技能">
                        </div>
                        <div class="equipment-slot" id="enemyWeapon">
                            <img src="images/弓箭手卡.png" alt="武器">
                        </div>
                    </div>
                </div>
            </div>
            <div class="enemy-card-area">
                <div class="hand-area fan-hand">
                    <div class="enemy-card card" data-id="2">
                        <img class="enemy-card-image" src="images/deck-cover.png">
                    </div>
                    <div class="enemy-card card" data-id="3">
                        <img class="enemy-card-image" src="images/deck-cover.png">
                    </div>
                    <div class="enemy-card card" data-id="4">
                        <img class="enemy-card-image" src="images/deck-cover.png">
                    </div>
                    <div class="enemy-card card" data-id="5">
                        <img class="enemy-card-image" src="images/deck-cover.png">
                    </div>
                </div>
                <div class="battlefield enemy-battlefield">
                    <div class="field-character" data-id="1">
                        <img class="field-character-image" src="images/战士立绘.png" alt="战士">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 20</div>
                            <div class="char-hp">HP: 50/50</div>
                            <div class="char-name">战士</div>
                        </div>
                    </div>
                    <div class="field-character" data-id="2">
                        <img class="field-character-image" src="images/法师立绘.png" alt="法师">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 35</div>
                            <div class="char-hp">HP: 30/30</div>
                            <div class="char-name">法师</div>
                        </div>
                    </div>
                    <div class="field-character" data-id="3">
                        <img class="field-character-image" src="images/法师卡.png" alt="牧师">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 15</div>
                            <div class="char-hp">HP: 40/40</div>
                            <div class="char-name">牧师</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 我方区域 -->
        <div class="battle-area player-area">
            <div class="character-section">
                <div class="character-info">
                    <div class="character-avatar">
                        <img src="images/战士立绘.png" alt="玩家头像" id="playerAvatar">
                    </div>
                    <div class="character-stats">
                        <p>强大的战士</p>
                        <p>生命值: 80/100</p>
                        <p>法力值: 5/10</p>
                    </div>
                    <div class="equipment-area">
                        <div class="equipment-slot" id="playerSkill">
                            <img src="images/战士卡.png" alt="技能">
                        </div>
                        <div class="equipment-slot" id="playerWeapon">
                        </div>
                    </div>
                </div>
            </div>
            <div class="player-card-area">
                <div class="battlefield">
                    <div class="field-character" data-id="4">
                        <img class="field-character-image" src="images/战士立绘.png" alt="战士">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 25</div>
                            <div class="char-hp">HP: 60/60</div>
                            <div class="char-name">骑士</div>
                        </div>
                        <div class="role-equipment-area">
                            <div class="role-equipment-slot" id="roleWeapon">
                                <img src="images/战士卡.png" alt="武器">
                            </div>
                            <div class="role-buff-area">
                                <div class="role-buff-slot" id="roleBuffs">
                                    <img src="images/战士卡.png" alt="buff">
                                </div>
                                <div class="role-buff-slot" id="roleBuffs">
                                    <img src="images/战士卡.png" alt="buff">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="field-character" data-id="5">
                        <img class="field-character-image" src="images/弓箭手立绘.png" alt="弓箭手">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 30</div>
                            <div class="char-hp">HP: 35/35</div>
                            <div class="char-name">弓箭手</div>
                        </div>
                    </div>
                    <div class="field-character" data-id="6">
                        <img class="field-character-image" src="images/战士卡.png" alt="刺客">
                        <div class="field-character-content">
                            <div class="char-attack">攻击: 40</div>
                            <div class="char-hp">HP: 45/45</div>
                            <div class="char-name">刺客</div>
                        </div>
                    </div>
                </div>
                <div class="hand-area fan-hand">
                    <div class="player-card card" data-id="1" title="火球术: 对目标造成15点伤害">
                        <div class="card-cost">3</div>
                        <img class="card-image" src="images/法师卡.png" alt="火球术">
                        <div class="card-name">火球术</div>
                    </div>
                    <div class="player-card card" data-id="2" title="治疗术: 恢复目标10点生命值">
                        <div class="card-cost">2</div>
                        <img class="card-image" src="images/法师卡.png" alt="治疗术">
                        <div class="card-name">治疗术</div>
                    </div>
                    <div class="player-card card" data-id="3" title="护盾: 为目标提供5点护甲">
                        <div class="card-cost">1</div>
                        <img class="card-image" src="images/战士卡.png" alt="护盾">
                        <div class="card-name">护盾</div>
                    </div>
                    <div class="player-card card" data-id="4" title="闪电链: 对3个目标造成8点伤害">
                        <div class="card-cost">4</div>
                        <img class="card-image" src="images/法师卡.png" alt="闪电链">
                        <div class="card-name">闪电链</div>
                    </div>
                    <div class="player-card card" data-id="5" title="召唤: 召唤一个3/3的随从">
                        <div class="card-cost">5</div>
                        <img class="card-image" src="images/法师卡.png" alt="召唤">
                        <div class="card-name">召唤</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 投降按钮 -->
        <button class="surrender-btn" id="surrenderBtn">投降</button>

        <!-- 下一回合按钮 -->
        <button class="next-turn-btn" id="nextTurnBtn">下一回合</button>

        <!-- 战斗信息显示 -->
        <div class="battle-info" id="battleInfo">
            <p>当前关卡: <span id="currentLevel">1</span></p>
            <p>当前回合: <span id="currentTurn">1</span></p>
            <p>当前卡牌作用对象: <span id="currentSelectCharacter">0</span></p>
        </div>
    </div>

    <!-- 回合结束浮窗 -->
    <div class="settlement-overlay" id="roundEndOverlay">
        <div class="round-end-content">
            <div class="round-end-title">
                <p id="roundEndTitle">我方回合结束</p>
            </div>
        </div>
    </div>

    <!-- 结算界面 -->
    <div class="settlement-overlay" id="settlementOverlay">
        <div class="settlement-content">
            <div class="settlement-title victory">战斗胜利！</div>
            <div class="reward-info">
                <p>获得金币: <span class="reward-amount" id="rewardGold">100</span></p>
            </div>
        </div>
    </div>

    <script src="js/battle.js"></script>
</body>

</html>